<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吴辉金</title>
    <link rel="stylesheet" href="./font_1943394_3tl38wv0748/iconfont.css">
    <style>
        body{
            background-color: rgba(0,0 ,0 , 0.05);
        }
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        .nav{
            width: 92%;
            height: 196.34px;
            margin-top: 2%;
            margin-left: 3%;
            border-radius: 8px;
            font-size: 12px;
            overflow: hidden;
            
            
        }
        .nav .hang{
            width: 100%;
            height: 66.15px;
            display: flex;
            background-color: brown;
        }
        .hang .lie{
            flex: 23%;
            line-height: 66.19px;
            border-right: 1px solid white;
            box-sizing: border-box;
        }
        .nav .lie:last-child{
            border: none;
        }
        .hang .lie:nth-child(1){
            flex: 31%;
        }
        .nav .q{
            background: linear-gradient(to right,#fa5956,#fb8650);
        }
        .nav.q.lie:first-child{
            background: url(./img/4.png)no-repeat right bottom;
            background-size:73px auto ;

        }
        .nav.q.lie:nth-child(2){
            background: url(./img/5.png)left bottom;
            background-size: 37px auto;
        }
        .nav.q.lie:nth-child(3){
            background: url(./img/3.png)right bottom;
            background-size: 100% auto;
}
        .nav .w{
            background: linear-gradient(to right,#4b8fed,#53bced);
        }
        .nav.w.lie:first-child{
            background: url(./img/2.png)no-repeat right bottom;
            background-size:73px auto ;

        }
        .nav.w.lie:nth-child(2){
            background: url(./img/6.png)left bottom;
            background-size: 37px auto;
        }
        .nav .e{
            background: linear-gradient(to right,#34c2aa,#6cd557);
        }
        .nav.e.lie:first-child{
            background: url(./img/7.png)no-repeat right bottom;
            background-size:73px auto ;

        }
        .nav.e.lie:nth-child(2){
            background: url(./img/1.png)left bottom;
            background-size: 37px auto;
        }
        .nav a{
            color: white;
            text-decoration: none;
            padding-left: 15%;
        }
        .nav .q .lie:last-child{
            flex: 46%;
            background: linear-gradient(to right,#ffbc49,#ffd252);
        }
        .w{
            margin: 1px 0;
        }
        .nav2{
            width: 90%;
            height: 110.06px;
            margin: 4% auto;
            display: flex;
            background-color: ;
            flex-wrap: wrap;
            
        }
        .nav2 li{
            flex: 20%;
            
        }
        .nav2 li a{
            text-decoration: none;
            color: #222;
            font-size: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            
            

        }
        .sabnav-icon{
            width: 28px;
            height: 28px;
            background-repeat: no-repeat;
             display: block; 
            background: url(./img/8.png);
            background-size: 28px;
            
            
        }
        .s2{
            background-position: 0 -28px;
        }
        .s3{
            background-position: 0 -56px;
        }
        .s4{
            background-position: 0 -84px;
        }
        .s5{
            background-position: 0 -112px;
        }
        .s6{
            background-position: 0 -140px;
        }
        .s7{
            background-position: 0 -168px;
        }
        .s8{
            background-position: 0 -196px;
        }
        .s9{
            background-position: 0 -224px;
        }
        .s10{
            background-position: 0 -252px;
        }
        .footer{
            width: 100%;
            height: 60px;
            display: flex;
        }
        .footer a{
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: #333;
            background-color:rgba(0,0 ,0 , 0.1) ;
        }
        .sousuolan{
            width: 100%;
            height: 50px;
            background-color: rgba(0,0 ,0 , 0.2);
            position: absolute;
            
        }
        .nei{
            width: 77%;
            height: 60%;
            background-color: white;
            display: inline-block;
            margin-left: 5%;
            border-radius: 15px;
            position: relative;
            top: 13px;
            
            
        }
        .wd{
            width: 51px;
            height: 44px;
            display: inline-block;
            margin-top: 4px;
            margin-left: 5px;
            
        }
        .fdj{
            height: 18px;
            width: 70%;
            margin-top: 6px;
            margin-left: 15px;
            font-size: 13px;
            line-height: 18px;

        }
        
        .fdj img{
            height: 18px;
        }
        .wd a{
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: white;
            }
        .duo{
            width: 90%;
            height: 64px;
            background-color: white;
            border-radius: 8px;
            margin-left: 5%;  
            position: relative; 
            top: -30px;
                   
        }
        

        
        .tup div{
            width: 40px;
            height: 40px;
            display: inline-block;
            margin-top: 6px;
            background: url(./img/duo.png);
            margin-left: 5%;
            background-size: 40px;
            
        }

        .wenzi div{
            box-sizing: border-box;
            width: 60px;
            height: 12px;
            display: inline-block;
            position: relative;
            top: -5px;
            
            margin-left: 2px;
            font-size: 12px;
        }
        
        .ab{
            background-position: 0 -40px;
        }
        .ac{
            background-position: 0 -80px;
        }
        .ad{
            background-position: 0 -120px;
        }
        .ae{
            background-position: 0 -160px;
        }
        .meishi{
            padding-left: 10px;
        }
        .cs img{
            width: 100%;
        }

    </style>
</head>
<body>
    <div class="sousuolan">
        <div class="nei">
            <div class="fdj">
                <img src="./img/4.jpg" alt="">
                搜索：目的地/酒店/景点/航班号
            </div>
        </div>
        <div class="wd">
            <a href="javascript:;">
                <span class="iconfont icon-wode "></span>
                <span>我的</span>
                </a> 
        </div>
    </div>
    <div class="cs">
        <img src="./img/cs.jpg" alt="">
    </div>
    <div class="duo">
        <div class="tup" >
            <div class="aa"></div>
            <div class="ab"></div>
            <div class="ad"></div>
            <div class="ac"></div>
            <div class="ae"></div>
        </div>
        <div class="wenzi">
            <div>攻略，景点</div>
            <div>零食，活动</div>
            <div class="meishi">美食林</div>
            <div class="meishi">周边游</div>
            <div class="meishi">一日游</div>
        </div>

    </div>
    
    <div class="nav">
        <div class="hang q">
            <div class="lie"><a href=""><span>酒店</span></a></div>
            <div class="lie"><a href=""><span>名宿，客栈</span></a></div>
            <div class="lie"><a href=""><span>特价，爆款</span></a></div>
            
        </div>
        <div class="hang w">
            <div class="lie"><a href=""><span>机票</span></a></div>
            <div class="lie"><a href=""><span>火车票</span></a></div>
            <div class="lie"><a href=""><span>汽车，船票</span></a></div>
            <div class="lie"><a href=""><span>专车，租车</span></a></div>
        </div>
        <div class="hang e">
            <div class="lie"><a href=""><span>旅游</span></a></div>
            <div class="lie"><a href=""><span>私家团</span></a></div>
            <div class="lie"><a href=""><span>邮轮游</span></a></div>
            <div class="lie"><a href=""><span>定制游</span></a></div>
        </div>
    </div>
    <div>

    </div>
    <ul class="nav2">
        <li>
            <a href="javascript:;">
                <span class="sabnav-icon s1"></span>
                <span>自由行</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span class="sabnav-icon s2"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span class="sabnav-icon s3"></span>
                <span>保险.签证</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span class="sabnav-icon s4"></span>
                <span>换钞.购物</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span class="sabnav-icon s5"></span>
                <span>向导.包车</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span class="sabnav-icon s6"></span>
                <span>特价机票</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span class="sabnav-icon s7"></span>
                <span>礼品卡</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span class="sabnav-icon s8"></span>
                <span>申卡.借钱</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span class="sabnav-icon s9"></span>
                <span>社区</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span class="sabnav-icon s10"></span>
                <span>更多</span>
            </a>
        </li>
    </ul>
    <!-- 底部导航条 -->

    <div class="footer">
        <a href="javascript:;">
            <span class="iconfont icon-dianhua"></span>
            <span>电话预定</span>
        </a>
        <a href="javascript:;">
            <span class="iconfont icon-xiazai "></span>
            <span>下载客户端</span>
            </a>
        <a href="javascript:;">
            <span class="iconfont icon-wode "></span>
            <span>我的</span>
            </a>  
    </div>
</body>
</html>